<template>
	<view>
	<image style="width: 100%" class="" src="/static/image/banner2.jpg" mode="widthFix"></image>
	<view style="width: 100%" class="w-user-info absolute top-8">
		<avatar :name="userDetail.username" :src="userDetail.avatar" :size="70" :showName="false"></avatar>
		<view class="flex flex-col items-center ">
			<view class="w-user-name z-10 text-white">{{userDetail.username}}</view>
			<uni-tag class="w-user-role z-10" type="warning" size="mini" :text="role" inverted
				v-for="(role, i) in (userDetail.roles || [])" :key="`r${i}`"></uni-tag>
		</view>
	</view>
	<uni-list class="w-user-items mx-5 shadow-md rounded-lg font-mono">
		<uni-list-item thumb="/static/image/dept.png" clickable>
			<template v-slot:body>
				<text class="w-items-t">
					<TnIcon name="logo-tuniao" />{{$t('flow.department')}}
				</text>
			</template>
			<template v-slot:footer>
				<text class="w-items-f">{{userDept}}</text>
			</template>
		</uni-list-item>
		<uni-list-item thumb="/static/image/entry.png" clickable>
			<template v-slot:body>
				<text class="w-items-t">{{$t('flow.on-boardTime')}}</text>
			</template>
			<template v-slot:footer>
				<text class="w-items-f">{{userDetail.entryDate}}</text>
			</template>
		</uni-list-item>
		<!-- #ifdef APP-VUE -->
		<uni-list-item thumb="/static/image/download.png" clickable showArrow>
			<template v-slot:body>
				<text class="w-items-t">{{$t('flow.on-boardTime')}}</text>
			</template>
		</uni-list-item>
		<!-- #endif -->
		<uni-list-item thumb="/static/image/agent.png" clickable showArrow @click="editAgent">
			<template v-slot:body>
				<text class="w-items-t">{{$t('flow.setUpAgent')}}</text>
			</template>
			<template v-slot:footer>
				<text class="w-items-f">{{userAgentText}}</text>
			</template>
		</uni-list-item>
	</uni-list>
	<view class="login-langType" >
		<view class="tag" v-for="(item, index) in cates" :key="index"
			:class="langIndex == index ? 'select' : 'noSelect'" :circle="true" :text="item"
			@click="switchLanguage(index)">{{ item }}
		</view>
	</view>
	<button class="w-user-logout shadow-lg shadow-red-400/50 rounded-lg" @click="logout" type="warn">{{$t('placeholder.accountsSwitch')}}</button>
</view>
</template>

<script setup>
	import Avatar from '@/components/Avatar.vue'
	import {
		getUserDetail
	} from '@/api/org.js'
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		computed,
		onBeforeMount,
		ref
	} from "vue";
	import { useI18n } from 'vue-i18n';
	import {getLang} from '@/locale/index';

	const { t } = useI18n();

	const userDetail = ref({})

	//当前登录的用户
	const loginUser = uni.getStorageSync('loginUser')

	const userDept = computed(() => {
		return (userDetail.value.depts || []).length === 0 ? t('webAuto.NoDepartment') : userDetail.value.depts.join('、')
	})

	const userAgentText = computed(() => {
		const agent = userDetail.value.userAgent
		if (!agent) {
			return t('flow.isNotSet')
		} else {
			return `（${agent.user.name}）${agent.effective ? t('flow.AgentIn'):t('flow.ProxyNotEffective')}`
		}
	})

	onShow(() => {
		getUserDept()
		let langType = uni.getLocale()
		langIndex.value = langTypes.findIndex(x => x == langType)
	})

	function getUserDept() {
		getUserDetail(loginUser.userId).then(rsp => {
			userDetail.value = rsp.data
		}).catch(err => {

		})
	}

	function logout() {
		uni.clearStorage()
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}

	function editAgent() {
		uni.navigateTo({
			url: '/pages/my/UserAgent'
		})
	}
	// 多语言切换的
let langIndex = ref();
let langTypes = ["zh-Hans", "en", "es"]
let cates = computed(() => {
	return [t('login.simplified'), t('login.english'), t('login.esglish')]
})
// 语言切换
function switchLanguage(index) {
	let type = langTypes[index];
	// #ifdef APP-PLUS
	if (isAndroid) {
		uni.showModal({
			content: t('login.language-change-confirm'),
			success: (res) => {
				if (res.confirm) {
					langIndex.value = index
					getLang(type)
				}
			}
		})
	} else {
		langIndex.value = index
		getLang(type)
	}
	// #endif
	// #ifndef APP-PLUS
	langIndex.value = index
	getLang(type)
	// #endif
}
</script>

<style lang="less" scoped>
	.w-user-info {
		z-index: 100;
		font-size: 32rpx;
		padding: 24rpx 0 6rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.uni-tag {
			font-weight: 400;
		}


		.w-user-name {
			font-size: 35rpx;
			margin: 10rpx 0;
		}

		.w-user-role {
			margin: 16rpx 10rpx;
		}
	}

	.w-user-logout {
		width: 90%;
		margin-top: 48rpx;
		font-size: 30rpx;
	}

	.w-user-items {
		margin-top: 16rpx;
	}

	.w-items-t {
		padding: 16rpx 0;
		font-size: 32rpx;
		display: flex;
		flex: 1;
		color: #3b4144;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.w-items-f {
		font-size: 29rpx;
		color: #797171;
		display: flex;
		align-items: center;
	}

.login-langType {
	position: absolute;
	top: 5rpx;
	right:5rpx;
	display: flex;
	flex-direction: row;
	height: 50rpx;
	width:250rpx;
	border-radius: 50rpx;
	background-color: #fff;
	padding: 4rpx 10rpx 10rpx;
	box-sizing: border-box;
}
.select {
	width: 85rpx;
	height: 40rpx;
	line-height:45rpx;
	color: #fff;
	font-weight: 500;
	text-align: center;
	border-radius:40rpx;
	background-color: #008AFF !important;
}

.noSelect {
	width: 100rpx;
	height: 40rpx;
	line-height: 30rxp;
	font-weight: 500;
	text-align: center;
	line-height: 40rxp;
}
</style>